D3 extent API

基本解釋

根據官方API文件的解釋
Returns the minimum and maximum value in the given iterable using natural order. If the iterable contains no comparable values, returns [undefined, undefined]. An optional accessor function may be specified, which is equivalent to calling Array.from before computing the extent.

其實就可以幫我們在可以被比較的iterable上，算出最大最小值。

範例

普通數字範例：

    const myArr = [1, 2, 3, 4, 5, 6, 7, 9, 10];
    const myExtent = d3.extent(myArr);

    // myExtent [1, 10]

普通日期範例：

    const myTimeArr = [
          new Date('2020/08/26 01:00'),
          new Date('2020/08/24 01:00'),
          new Date('2020/10/25 01:00'),
          new Date('2020/08/21 01:00'),
          new Date('2020/09/30 01:00'),
          new Date('2020/07/21 01:00'),
        ];
    const myTimeExtent = d3.extent(myTimeArr);

    // myTimeExtent [
    // Tue Jul 21 2020 01:00:00 GMT+0800 (台北標準時間),
    // Sun Oct 25 2020 01:00:00 GMT+0800 (台北標準時間)
    // ]

用途

至於為何會需要這API，跟畫圖有甚麼關係呢？
其實在畫圖的時候要算出位置跟大小是最困難的，而大小跟位置在動態依照資料而顯示的狀況下，需要大量計算資料跟圖的關係，也因此D3提供許多資料對應出圖的位置跟大小比例。

其他API

• d3.max, d3.min
  D3還有提供取最大最小分開的API，所以其實d3.extent也等同於下方。

範例

 const myTimeExtent = [
     d3.min(myArr),
     d3.max(myArr)
 ]

• d3.maxIndex, d3.minIndex
  可取得iterable中最大最小的Index。

範例

d3.minIndex([3, 99, 1, 10]) = 2

d3.maxIndex([3, 99, 1, 10]) = 1

• d3.sum
  d3.sum可以協助計算總合。

範例

 d3.sum([1, 2, 3, -0.5]) = 5.5

• d3.median
  d3.median可計算出平均值

範例

 d3.mean([1, 5, 999]) = 335

參考

D3 API